<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/confirm_order_style.css">
    <title>确认订单</title>
</head>
<body>
     <!-- 导航栏start -->
     <header class="header">
        <div class="container-fluid">
            <div class="header_content">
                <!-- logo图 -->
                <div class="header_logo">
                    <a href="index.html">
                        <img src="images/logo.jpg" alt="LOGO">
                    </a>
                </div>
                <!-- 导航栏搜索 -->
               <form action="#" class="header_search ms-auto">
                    <input type="text" class="form-control" placeholder="搜你想要">
                    <button type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </form>
                <!-- 导航栏中间按钮 -->
                <div class="header_menu">
                    <ul class="header_nav">
                        <li>
                            <a class="header_nav_link" href="index.html" role="button">首页推荐</a>
                        </li>
                        <li>
                            <a class="header_nav_link" href="#" role="button" id="digital-area">数码专区</a>
                        </li>
                        <li>
                            <a class="header_nav_link"  role="button" id="my-msg">我的消息</a>
                        </li>
                    </ul>
                </div>
                <!-- 导航栏侧边 -->
                <div class="header_action">
                <ul class="header_action_nav">
                    <li>
                        <div class="dropdown">
                            <a class="header_sign dropdown-toggle" id="login_region" href="#" role="button" data-toggle="dropdown" aria-expanded="false">test12</a>
                                <div class="dropdown-menu" aria-labelledby="login">
                                    <a class="dropdown-item" id="dropdown-login-item" href="login.html">登录</a>
                                    <a class="dropdown-item" id="dropdown-exit-item" >退出</a>
                                </div>
                        </div>
                    </li>
                    <li>
                        <a class="header_sign" role="button" id="person_center">个人中心</a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航end -->

    <!-- 页面主体 -->
    <div class="confirmorder-main-area">
        <div class="main-title">
           <span>确认订单：</span>
        </div>
        <div class="card">
            <div class="card-header">
                选择收获地址
            </div>
            <div class="card-body address-list">
                
            </div>
        </div>
        <div class="card" style="height: 600px;">
            <div class="card-header">
                订单信息
            </div>
            <div class="card-body order_desc">
                <div class="item-headers-wrapper">
                    <div class="item-headers-content item-headers-0">租赁宝贝</div>
                    <div class="item-headers-content item-headers-1">租赁类型</div>
                    <div class="item-headers-content item-headers-2">单件租赁价格</div>
                    <div class="item-headers-content item-headers-3">数量</div>
                    <div class="item-headers-content item-headers-4">小计</div>
                </div>
                <div class="online_store"><span>店铺：</span><span id="seller-name">聚星电子旗舰店</span></div>
                <div class="itemInfo-area">
                    <div class="info-detail info-item">
                        <div class="img-box">
                            <img id="pro-img" src="images/test_hw3.jpg">
                        </div>
                        <div class="info-msg">
                            <span id="product-name">2022全新原封Huawei/华为 P50Pro新款手机热销排行榜正品店P50e</span>
                        </div>

                    </div>
                    <div class="info-renttype info-item">
                        <div class="rent-pattern">
                            <span id="pattern-title-area">租赁模式：</span>
                            <span id="pattern">先租后买</span>
                            <span id="rent_pattern"></span>
                        </div>
                        <div class="rent-time-area">
                            <span id="time-title"></span>
                            <span id="rent-time"></span>
                            <span id="rent-time-dayormon"></span>
                        </div>
                        <div class="rent-single-area">
                            <span id="rent-single-title">租赁单价：</span>
                            <span id="rent-single-price">2</span>
                            <span id="dayormonth"></span>
                        </div>
                    </div>
                    <div class="info-price info-item">
                        <span>¥</span>
                        <span id="rent-money">219.00</span>
                    </div>
                    <div class="order-quantity info-item">
                        <div class="input-spinner">
                            <input id="inputsipnner-pro-num" type="number" value="1" min="1" max="1000" step="1"/>
                        </div>
                    </div>
                    <div class="item-row-price info-item">
                        <span id="subtotal" style="font-weight: bold; font-style: normal; text-decoration: none; color: rgb(255, 0, 54); font-size: 20px;">219.00</span>
                    </div>
                </div>
                <div class="box">
                    <div class="box1">
                        <div class="box2">
                            <div class="order-payInfo">
                                <div>
                                    <span class="payinfo-price-title">实付款：</span>
                                    <span class="payinfo-price-symnbol">¥</span>
                                    <span class="payinfo-price" id="actual-pay-money" style="color: rgb(255, 80, 0);font: 700 26px tahoma;">219.00</span>
                                </div>
                                <div>
                                    <span>寄送至：</span>
                                    <span id="final-addr">未选择</span>
                                </div>
                                <div>
                                    <span>收货人：</span>
                                    <span id="final-consignee">未选择</span>
                                    <span id="final-phone"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-submit-area">
                    <a role="button"  class="submit-btn" style="background-color: rgb(255, 80, 0);">提交订单</a>
                </div>
            </div>
        </div>
    </div>


     <!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
    <!-- Section: Social media -->
    <section
      class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
    >
      <!-- Left -->
      <div class="me-5 d-none d-lg-block">
        <span>Get connected with us on social networks:</span>
      </div>
      <!-- Left -->
  
      <!-- Right -->
      <div>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-facebook-f"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-twitter"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-google"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-instagram"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-linkedin"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-github"></i>
        </a>
      </div>
      <!-- Right -->
    </section>
    <!-- Section: Social media -->
  
    <!-- Section: Links  -->
    <section class="">
      <div class="container text-center text-md-start mt-5">
        <!-- Grid row -->
        <div class="row mt-3">
          <!-- Grid column -->
          <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
            <!-- Content -->
            <h6 class="text-uppercase fw-bold mb-4">
              <i class="fas fa-gem me-3"></i>租好玩
            </h6>
            <p>
                投资有风险，购买需谨慎
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              产品
            </h6>
            <p>
              <a href="#!" class="text-reset">数码</a>
            </p>
            <p>
              <a href="#!" class="text-reset">生活</a>
            </p>
            <p>
              <a href="#!" class="text-reset">娱乐</a>
            </p>
            <p>
              <a href="#!" class="text-reset">工作</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              关于我们
            </h6>
            <p>
              <a href="#!" class="text-reset">经营证照</a>
            </p>
            <p>
              <a href="#!" class="text-reset">平台协议</a>
            </p>
            <p>
              <a href="#!" class="text-reset">隐私政策</a>
            </p>
            <p>
              <a href="#!" class="text-reset">免责声明</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              联系我们
            </h6>
            <p><i class="fa fa-home me-3"></i> New York, NY 10012, US</p>
            <p>
              <i class="fa fa-envelope me-3"></i>
              zuhaowan@example.com
            </p>
            <p><i class="fa fa-phone me-3"></i> + 01 234 567 88</p>
            <p><i class="fa fa-print me-3"></i> + 01 234 567 89</p>
          </div>
          <!-- Grid column -->
        </div>
        <!-- Grid row -->
      </div>
    </section>
    <!-- Section: Links  -->
  
    <!-- Copyright -->
    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
      © 2021 Copyright:
      <a class="text-reset fw-bold" href="#">zuhaowan.com</a>
    </div>
    <!-- Copyright -->
  </footer>
  <!-- Footer -->
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.bundle461.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-input-spinner.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/API/confirm_order.js"></script>


<!-- 引入input spinner js -->
<script>
    $("input[type='number']").inputSpinner();
  </script>
  <script>
    $("#person_center").click(function(){
        if($.cookie("status")==0){
            alert("请先登录！");
            return
        }
        else if($.cookie("status")==1){
            window.open("personalCenter.html");
        }
    })
</script>
<script>
    $("#my-msg").click(function(){
        if($.cookie("status")==0){
            alert("请先登录！");
            return
        }
        else if($.cookie("status")==1){
            window.open("message.html");
        }
    })
</script>
</html>